{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Kubernetes管理平台-登录</title>
    <link rel="stylesheet" href="{% static 'layui/css/layui.css' %}">
    <link rel="stylesheet" href="{% static 'css/main.css' %}">
    <!-- 这里写的样式是本页面自己独有的，其他页面不需要使用的 -->
    <style>
        .layui-form-radioed {
            color: dodgerblue !important;
        }
        .layui-form-radio:hover *, .layui-form-radioed, .layui-form-radioed > i {
            color: dodgerblue !important;
        }
        .layui-form-select dl dd.layui-this {
            background-color: dodgerblue !important;
            color: #fff
        }

        .login-container {
            /*background-color: #b2b2b2;*/
            background-image: url('{% static "img/bg.jpg" %}');
            height: 100%;
        }

        .login-box {
            width: 450px;
            height: 300px;
            background-color: #ffffff;
            border-radius: 10px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        .avatar-box {
            width: 130px;
            height: 130px;
            padding: 10px;
            position: absolute;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .avatar-box img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }

        .login-form {
            position: absolute;
            bottom: 0;
            width: 100%;
            padding: 0 20px;
            box-sizing: border-box;
        }

        .token {
            border-style: none;
            border-bottom: 1px solid black;
            outline: none;
        }

        .config {
            border-style: none;
            outline: none;
        }
    </style>
</head>
<body>
<div class="login-container">
    <div class="login-box">
        <div class="avatar-box">
            <img src="{% static 'img/logo.png' %}" alt="logo">
        </div>

        <form class="layui-form layui-form-pane login-form">
            {% csrf_token %}
            <div class="layui-form-item" pane>
                <label class="layui-form-label">登录方式</label>
                <div class="layui-input-block">
                    <input type="radio" name="auth_type" value="token" title="Token" lay-filter="auth_type" checked>
                    <input type="radio" name="auth_type" value="config" title="Config" lay-filter="auth_type">
                </div>
            </div>

            <div class="layui-form-item" id="cluster_name" pane>
                <label class="layui-form-label">登录集群</label>
                <div class="layui-input-block">
                    <select name="cluster_name">
                        {% for cluster in data %}
                            <option value="{{ cluster.cluster_name }}">{{ cluster.cluster_name }}</option>
                        {% endfor %}
                       <!-- <option value="clustername">clustername</option>-->
                    </select>
                </div>
            </div>


            <div class="layui-form-item">
                <div id="login-token">
                    <input type="password" name="token" placeholder="请输入Token" class="layui-input token" id="token">
                </div>

                <div id="login-config" style="display: none">
                    <input type="file" name="file" class="layui-input config" id="config">
{#                    <button type="button" class="layui-btn" id="config"><i class="layui-icon"></i>上传文件</button>#}
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block"  style="margin-left: 150px">
                    <button type="button" class="layui-btn layui-btn-normal" lay-submit="" lay-filter="btn1" id="btn1">
                        <a style="font-weight: bold;font-size: 14px;color: white">立即提交</a>
                    </button>
                    <button type="button" class="layui-btn layui-btn-normal" lay-submit="" lay-filter="btn2" id="btn2" style="display: none;margin-left: 0">
                        <a style="font-weight: bold;font-size: 14px;color: white">立即提交</a>
                    </button>
                </div>
                <div style="text-align: center">
                    <span id="notice" style="font-weight: bold"></span>
                </div>
            </div>
        </form>
    </div>
</div>

<script src="{% static 'layui/layui.js' %}"></script>
<script>
    layui.use(['form', 'layer'], function () {
        var form = layui.form;
        //var layer = layui.layer;
        var upload = layui.upload;
        var $ = layui.jquery;

        //监听提交
        form.on('radio(auth_type)', function (data) {
            console.log(data);
            if (data.value === 'token') {
                $("#login-token").css("display", "inline");
                $("#login-config").css("display", "none");
                $("#btn1").css("display", "inline");
                $("#btn2").css("display", "none")
            } else if (data.value === 'config') {
                //$("#login-cluster select").attr("disabled", "disabled");
                $("#login-token").css("display", "none");
                $("#login-config").css("display", "inline");
                $("#btn1").css("display", "none");
                $("#btn2").css("display", "inline")
            }
        });

        form.on('submit(btn2)', function (data) {
            data = data.field;
            console.log(data);
            if (data['auth_type'] === 'config' && data['file'] === '') {
                $("#notice").html("请选择kubeconfig文件！").css("color", "red");
                return
            }
            if (data['cluster_name'] === ''){
                $("#notice").html("请选择集群！").css("color", "red");
            }
        });

        form.on('submit(btn1)', function (data) {
            data = data.field;
            //console.log(data);

            if (data['auth_type'] === 'token' && data['token'] === '') {
                $("#notice").html("请输入Token！").css("color", "red");
                return
            }
            $.ajax({
                url: '{% url "login" %}',
                type: 'POST',
                data: data,
                // 提交成功回调函数
                success: function (res) {
                    if (res.code === 200) {
                        location.href = "{% url 'index' %}"
                    } else {
                        $("#notice").html(res.msg).css("color", "red");
                    }
                },
                error: function () {
                    $("#notice").html("服务端接口异常！").css("color", "red");
                }
            });
        });

        upload.render({
            elem: '#config'
            ,url: '{% url 'login' %}' //此处配置你自己的上传接口即可
            ,auto: false  // 是否选完文件后自动上传
            ,bindAction: '#btn2' // 绑定提交表单按钮，一般配合auto: false使用
            ,accept: 'file' // 指定允许上传时效验的文件类型
            ,size: 50 //限制文件大小，单位 KB
            ,before: function () {
                  this.data = {
                      csrfmiddlewaretoken: $('[name="csrfmiddlewaretoken"]').val(),
                      auth_type: $('input[name="auth_type"]:checked').val(),
                      cluster_name: $('select[name="cluster_name"]').val(),
                  };
                  //console.log(this.data)
            }
            ,done: function(res){  // 上传完后回调，服务端以json格式返回数据
                  if (res.code === 200) {
                        location.href = "{% url 'index' %}"
                  } else {
                      $("#notice").html(res.msg).css("color", "red");
                      //window.location.reload();
                  }
            }
            ,error: function (res) {
                  $("#notice").html("服务端接口异常！").css("color", "red");
            }
        });
    })
</script>
</body>
</html>